import React from 'react'
import { Swiper, Tabs } from 'antd-mobile'
import { Redirect, useHistory, useLocation } from 'umi'

import styles from "./_layout.less"

export default function Film(props: any) {

  const posters = [
    "https://pic.maizuo.com/usr/movie/228a4e54fecfdb1c843f83ed28f947d6.jpg",
    "https://pic.maizuo.com/usr/movie/5ad5870a1467a1c41b6652687c9c7180.jpg",
    "https://pic.maizuo.com/usr/movie/7a61b5f8e702ce6c705a9b51db7a62e7.jpg",
    "https://pic.maizuo.com/usr/movie/fceeb41a1660d097d02fbcbda3191d8f.jpg"
  ]
  const history = useHistory();
  const items = posters.map((item, index) => (
    <Swiper.Item key={index}>
      <div
        className={styles.content}
        onClick={() => {
          // Toast.show(`你点击了卡片 ${index + 1}`)
        }}
      >
        <img
          src={item}
          alt="热映海报"
          style={{ width: "100%" }}></img>
      </div>
    </Swiper.Item>
  ));
  function change(value: any) {
    console.log(value);
    history.push(value);
  }

  const location = useLocation();
  console.log("location.pathname", location.pathname)
  if ("/film" === location.pathname || "/film/" === location.pathname) {
    return <Redirect to="/film/nowplaying" />
  } else {
    return (
      <div>
        <div>
          <Swiper autoplay>{items}</Swiper>
        </div>
        <div style={{ position: "static", top: 0 }}>
          <Tabs
            onChange={(value) => { change(value) }}
            activeKey={location.pathname}>
            <Tabs.Tab title='正在热映' key='/film/nowplaying'>
            </Tabs.Tab>
            <Tabs.Tab title='即将上映' key='/film/commingsoon'>
            </Tabs.Tab>
          </Tabs>
        </div>
        {props.children}

      </div>
    )
  }

}
